<template>
  <h1>{{ msg }}</h1>
  <div>{{ count }}</div>
  
  <div>{{ person.name }} -- {{person.age}} -- {{person.deepObj.a}} -- {{person.deepObj.b}}</div>
  <ul>
    <li v-for="item in intrestList"
        :key="item">{{item}}</li>
  </ul>
  <el-button type="primary"
             @click="btnClick">增加</el-button>
</template>

<script lang="ts">
import { ref, defineComponent, reactive } from "vue";
export default defineComponent({
  name: "HelloWorld",
  props: {
    msg: {
      type: String,
      required: true,
    },
  },
  setup(props, { attrs, slots, emit }) {
    // var msg:string = props.msg;
    const count = ref(11);
    var initObj = {
      name: "张三",
      age: 44,
      intrest: ["读书", "电影"],
      deepObj: { a: 11, b: 22 },
    };
    const person = reactive(initObj);
    const btnClick = function () {
      count.value += 1;
      person.age += 1;
      person.intrest.push("打球");
      person.deepObj.a++;
      delete person.deepObj.b;
      emit("btnChange", count.value);
    };
    return { count, btnClick, person, intrestList: person.intrest };
  },
  data() {
    return {
      count: 12,
    };
  },
  mounted() {},
});
</script>

<style scoped>
</style>
